<template>
	<view class="content">
<!--		<image class="logo" src="/static/logo.png"></image>-->
<!--		<view class="text-area">-->
<!--			<text class="title">{{title}}</text>-->
<!--		</view>-->
<!--        <view class="top">-->
<!--            <image class="top-image" :class="{'top-image-animation':isAnimation}" :src="topImgUrl" mode="aspectFill"></image>-->
<!--            <image class="top-upload" src="/static/upload2.png" @click="handleUpload"></image>-->
<!--        </view>-->
<!--        <button class="" @click="handleUpload">上传</button>-->
        <view class="list" v-for="item in list">
<!--            <view class="name">{{item.name}}</view>-->
            <view class="block">
                <image class="picture" :style="{width: trisectionWidth + 'px', height: trisectionWidth + 'px'}" :src="one" v-for="(one,oneIndex) in item.list" mode="aspectFill" @click="handlePreviewImage(item,one,oneIndex)"></image>

                <!--                <image class="picture" :style="{width: trisectionWidth + 'px'}" :src="`${$baseImgUrl}/${openid}/${item.name}/${one}`" v-for="(one,oneIndex) in item.list" mode="aspectFill" @click="handlePreviewImage(item,one,oneIndex)"></image>-->
<!--                <view class="total" :style="{width: trisectionWidth + 'px', height: trisectionWidth + 'px'}" v-if="item.total>9">+{{item.total}}</view>-->
            </view>
        </view>
                <button class="share-button" open-type="share">
                    <image class="share" src="/static/share.png"></image>
                </button>


<!--        <button open-type="getPhoneNumber" @getphonenumber="onPhoneNumber">getPhoneNumber</button>-->

    </view>

</template>

<script>
// import popup from '@/components/popup'
// import {getCurrentInstance} from 'vue'
// import {mapMutations} from 'vuex'
import request from '@/utils/requestApi'
import $util from '@/utils/util'
	export default {
		data() {
			return {
				// title: 'Hello',
                // baseImgUrl: 'https://13490f.spjgzs.com:13490/oss/code-group',
                list: [],
                openid: uni.getStorageSync('openid'),
                phone: uni.getStorageSync('phone'),
                screenWidth: 375,
                trisectionWidth: 117,
                topImgUrl: 'https://13490f.spjgzs.com:13490/oss/images/top0.jpeg',
                isAnimation: true,
                routeData: null
			}
		},
		onLoad(options) {
            this.routeData = options
            this.init(options)
		},
        onShareAppMessage(res) {
            return {
                title: `用户${this.phone}分享给您的照片`,
                path: `/pages/list?type=share&openid=${this.openid}&name=${this.routeData.name}`,
                imageUrl: this.topImgUrl
            }
        },
        onShareTimeline(res) {
            console.log('this.openid',this.openid)
            return {
                title: `用户${this.phone}分享给您的照片`,
                path: `/pages/list`,
                query: `type=share&openid=${this.openid}&name=${this.routeData.name}`,
                imageUrl: this.topImgUrl
            }
        },
        onPullDownRefresh() {
            const that = this
            // console.log('refresh')
            setTimeout(()=> {
                uni.stopPullDownRefresh()
                that.getPicture()
            }, 1000)
        },
		methods: {
            async init(options) {
                console.log(options)
                let windowInfo = uni.getWindowInfo()
                if (!!windowInfo && !!windowInfo.screenWidth) {
                    this.screenWidth = windowInfo.screenWidth
                    this.trisectionWidth = ((windowInfo.screenWidth - 12 - 12) / 3)
                }


                // let onLoginData = await this.onLogin()
                // if (!!onLoginData) {
                //     await this.login(onLoginData)
                // }
                // console.log(onLoginData)

                await this.getPicture()
                // this.setTopImgUrl()
            },

            handlePreviewImage(item,one,oneIndex) {
                let data = {
                    current: oneIndex,
                    urls: []
                }
                item.list.forEach(one=>{
                    data.urls.push(one
                        // `${this.$baseImgUrl}/${this.openid}/${item.name}/${one}`
                    )
                })
                    // ${$baseImgUrl}/${openid}/${item.name}/${one}
                uni.previewImage(data)
            },




            async getPicture() {
                let routeData = this.routeData
                let params = {
                    name: routeData.name,
                    shareOpenid: routeData.openid
                }
                let res = await request.getPicture(params)
                this.list = res.data
                uni.setNavigationBarTitle({
                    title: this.list[0]['name']
                })
            },

		}
	}
</script>

<style>
	/*.content {*/
	/*	display: flex;*/
	/*	flex-direction: column;*/
	/*	align-items: center;*/
	/*	justify-content: center;*/
	/*}*/
    .share-button {
        width: 120rpx;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 8;
        background: transparent;
        border: none;
        outline: none;
    }
    .share-button:after {
        background: transparent;
        border: none;
        outline: none;
    }
    .share {
        width: 60rpx;
        height: 60rpx;
        position: fixed;
        top: 32rpx;
        right: 32rpx;
        z-index: 9;
        /*background: chocolate;*/
    }
    @keyframes fadeInAnimation {
        0% {
            opacity: 0.4;
        }
        /*10% {*/
        /*    opacity: 0.1;*/
        /*}*/
        /*20% {*/
        /*    opacity: 0.2;*/
        /*}*/
        /*30% {*/
        /*    opacity: 0.3;*/
        /*}*/
        /*40% {*/
        /*    opacity: 0.4;*/
        /*}*/
        /*50% {*/
        /*    opacity: 0.5;*/
        /*}*/
        100% {
            opacity: 1;
        }
    }
    .content {
        background-color: rgba(255,152,0, 0.04);
    }
    .top {
        width: 100%;
        position: relative;
    }
    .top-image {
        width: 100%;
        height: 480rpx;
        /*animation: fadeInAnimation ease 19s;*/
        /*animation-iteration-count: 10000;*/
        /*animation-fill-mode: forwards;*/
    }
    .top-image-animation {
        animation: fadeInAnimation ease 3s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    .top-upload {
        width: 120rpx;
        height: 120rpx;
        position: fixed;
        top: 32rpx;
        right: 32rpx;
        z-index: 9;
    }
    .list {

    }
    .name {
        font-weight: bold;
        font-size: 32rpx;
        padding: 8px 0 8px 8px;
        /*margin-bottom: 8rpx;*/
    }
    .block {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 8px 4px 8px 8px;
        background: #fff;
        /*padding-left: 16rpx;*/
        /*margin-bottom: 32rpx;*/
    }
    .picture {
        width: 220rpx;
        height: 220rpx;
        margin-right: 4px;
        margin-bottom: 4px;
        /*margin: 0 16rpx 16rpx 0;*/
    }
    .total {
        position: absolute;
        bottom: 12px;
        right: 8px;
        background: rgba(136, 131, 122, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50rpx;
        font-weight: bold;
        color: #fff;
    }

	/*.logo {*/
	/*	height: 200rpx;*/
	/*	width: 200rpx;*/
	/*	margin-top: 200rpx;*/
	/*	margin-left: auto;*/
	/*	margin-right: auto;*/
	/*	margin-bottom: 50rpx;*/
	/*}*/

	/*.text-area {*/
	/*	display: flex;*/
	/*	justify-content: center;*/
	/*}*/

	/*.title {*/
	/*	font-size: 36rpx;*/
	/*	color: #8f8f94;*/
	/*}*/
</style>
